<template>
  <view class="container">
    <view class="title">我的</view>
    <view class="card">
      <image class="avatar" :src="user?.avatarUrl || defaultAvatar" mode="cover" />
      <view class="info">
        <view class="row">ID：{{ user?.id ?? '-' }}</view>
        <view class="row">名称：{{ user?.nickname || user?.account || '-' }}</view>
      </view>
    </view>
    <button class="btn danger" @tap="logout">退出登录</button>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const user = ref<any>(null)
const defaultAvatar = '/static/logo.png'

function loadUser() {
  try {
    user.value = uni.getStorageSync('user') || null
  } catch { user.value = null }
}

function logout() {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success(res) {
      if (res.confirm) {
        try {
          uni.removeStorageSync('token')
          uni.removeStorageSync('user')
        } catch {}
        uni.reLaunch({ url: '/pages/view/loginView' })
      }
    }
  })
}

onMounted(loadUser)
</script>

<style>
.container { padding: 24rpx; }
.title { font-size: 32rpx; font-weight: 600; margin-bottom: 16rpx; }
.card { display: flex; align-items: center; padding: 16rpx; border: 1px solid #eee; border-radius: 16rpx; }
.avatar { width: 120rpx; height: 120rpx; border-radius: 50%; background: #f0f0f0; }
.info { margin-left: 20rpx; }
.row { font-size: 28rpx; color: #333; margin: 8rpx 0; }
.btn { width: 100%; margin-top: 24rpx; padding: 22rpx; border-radius: 12rpx; background-color: #007aff; color: #fff; font-size: 30rpx; }
.btn.danger { background-color: #e74c3c; }
</style>